<template>
  <section class="shop-edit-container">
    <ElButton type="warning" round class="btn-back" @click="back">
      <i class="icon-undo2"></i>
      返回主页</ElButton
    >
    <ElCard>
      <ElForm :model="shopForm" class="shop-edit">
        <ElRow>
          <ElCol :span="12">
            <ElFormItem label="门店名称：">
              <ElInput
                v-model="shopForm.shop_name"
                :placeholder="shopForm.shop_name"
                @change="changeEditStatus"
              ></ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="服务类型：">
              <ElSelect
                v-model="door"
                placeholder="请选择"
                @change="changeEditStatus"
              >
                <ElOption label="到店服务" value="到店服务"></ElOption>
                <ElOption label="上门服务" value="上门服务"></ElOption>
                <ElOption label="可到店可上门" value="可到店可上门"></ElOption>
              </ElSelect>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="12">
            <ElFormItem label="固定电话：">
              <ElInput
                v-model="shopForm.fixed_line"
                :placeholder="shopForm.fixed_line"
                @change="changeEditStatus"
              ></ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="移动电话：">
              <ElInput
                v-model="shopForm.shop_phone"
                :placeholder="shopForm.shop_phone"
                @change="changeEditStatus"
              ></ElInput>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="24">
            <ElFormItem label="门店展示：">
              <ElRadioGroup
                v-model="shopForm.is_show.data"
                class="shop-show"
                @change="changeEditStatus"
              >
                <ElRadioButton label="仅自己门店会员可见"></ElRadioButton>
                <ElRadioButton label="仅连锁店会员可见"></ElRadioButton>
                <ElRadioButton label="平台所有会员可见"></ElRadioButton>
                <ElRadioButton label="门店不在平台展示"></ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="24">
            <ElFormItem label="门店地址：">
              省份：
              <ElSelect
                v-model="shopForm.one"
                class="city"
                :placeholder="addressArea[0]"
                @change="changeEditStatus"
              >
                <ElOption
                  v-for="(item, index) in one"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></ElOption>
              </ElSelect>
              城市：
              <ElSelect
                v-model="shopForm.two"
                class="city"
                :placeholder="addressArea[1]"
                @change="changeEditStatus"
              >
                <ElOption
                  v-for="(item, index) in two"
                  :key="index"
                  :label="item.name"
                  :selected="item.name === addressArea[1]"
                  :value="item.id"
                ></ElOption>
              </ElSelect>
              区县：
              <ElSelect
                v-model="shopForm.area_id"
                class="city"
                :placeholder="addressArea[2]"
                @change="changeEditStatus"
              >
                <ElOption
                  v-for="(item, index) in three"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></ElOption>
              </ElSelect>
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="24">
            <ElFormItem label="详细地址：">
              <ElInput
                v-model="shopForm.address"
                class="address"
                :placeholder="shopForm.address"
                @change="changeEditStatus"
              ></ElInput>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElCard>
    <ElCard class="el-card-image">
      <ElRow class="intro image-row">
        <ElCol :span="12"
          ><PhotoAdd
            :name="'门店照片：'"
            :img="shopForm.shop_photo && shopForm.shop_photo.photo"
            @photoImgUrl="photoImgUrl"
            @imgLoading="imgLoading"
        /></ElCol>
        <ElCol :span="12" style="color: #333"
          ><span class="title title-faren">门店微信：</span>
          <div class="content">
            <img :src="shopForm.ticket || defaultImage" height="200" /></div
        ></ElCol>
      </ElRow>
      <ElRow
        v-if="shopForm.is_show && shopForm.is_show.data !== '门店不在平台展示'"
        class="image-row"
      >
        <ElCol :span="12"
          ><PhotoAdd
            :name="'营业执照：'"
            :img="shopForm.license && shopForm.license.photo"
            @photoImgUrl="licenseImgUrl"
            @imgLoading="licenseLoading"
        /></ElCol>
        <ElCol :span="12"
          ><PhotoAdd
            :name="'软件授权书:'"
            :img="shopForm.grant && shopForm.grant.photo"
            @photoImgUrl="grantImgUrl"
            @imgLoading="grantLoading"
        /></ElCol>
      </ElRow>
    </ElCard>
    <ElCard
      v-if="shopForm.is_show && shopForm.is_show.data !== '门店不在平台展示'"
      class="el-card-image"
    >
      <ElRow class="image-row"
        ><ElCol :span="12"
          ><span class="title title-faren">法人姓名：</span>
          {{ shopData.legal_name }} </ElCol
        ><ElCol :span="12"
          ><span class="title title-faren">法人电话：</span>
          {{ shopData.legal_tel }}</ElCol
        ></ElRow
      >
      <ElRow class="image-row">
        <ElCol :span="12"
          ><PhotoAdd
            :name="'身份证：'"
            :img="shopForm.id_card && shopForm.id_card[0].photo"
            @photoImgUrl="card0ImgUrl"
            @imgLoading="card0Loading"
        /></ElCol>
        <ElCol :span="12"
          ><PhotoAdd
            :img="shopForm.id_card && shopForm.id_card[1].photo"
            @photoImgUrl="card1ImgUrl"
            @imgLoading="card1Loading"
        /></ElCol>
      </ElRow>
    </ElCard>
    <ElCard
      v-if="shopForm.is_show && shopForm.is_show.data !== '门店不在平台展示'"
    >
      <ElRow class="intro">
        <ElCol col="24"
          ><span class="title">门店介绍：</span>
          <div class="content">
            <ElInput
              v-model="shopForm.shop_profile"
              type="textarea"
              :rows="4"
            /></div
        ></ElCol>
      </ElRow>
    </ElCard>
    <div class="submit">
      <ElButton round :disabled="isUploading" @click="onSubmit">提交</ElButton>
    </div>
  </section>
</template>

<script>
import _ from 'lodash';
import {http, catchAppError} from '@/util';
import url from '@/config';
import PhotoAdd from '@/components/shop/PhotoAdd.vue';
import toast from '@/toast';
import defaultImage from '@/assets/img/default.jpg';
import {menusNavigation} from '@/store';

export default {
  name: 'ShopEdit',
  components: {PhotoAdd},
  props: {
    shopData: {
      type: Object,
      default: () => ({})
    },
    isEditing: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultImage,
      isUploading: false,
      shopPhotoImgUpLoading: false,
      licenseImgLoading: false,
      grantImgLoading: false,
      card0ImgLoading: false,
      card1ImgLoading: false,
      shopPhoto: '',
      grantPhoto: '',
      licensePhoto: '',
      card0Photo: '',
      card1Photo: '',
      one: [],
      two: [],
      three: [],
      longitude: '', // 经度
      dimension: '', // 纬度
      door: this.shopData.is_door && this.shopData.is_door.data
    };
  },
  computed: {
    shopForm() {
      return this.shopData;
    },
    addressArea() {
      return this.shopData.region.mergename.split(',').splice(1);
    }
  },
  watch: {
    // eslint-disable-next-line func-names
    'shopForm.one': function() {
      http
        .post(url.getArea, {pid: this.shopForm.one})
        .then(res => {
          this.two = res;
        })
        .catch(catchAppError);
    },
    // eslint-disable-next-line func-names
    'shopForm.two': function() {
      http
        .post(url.getArea, {pid: this.shopForm.two})
        .then(res => {
          this.three = res;
        })
        .catch(catchAppError);
    },
    shopPhoto() {
      this.changeEditStatus();
    },
    grantPhoto() {
      this.changeEditStatus();
    },
    licensePhoto() {
      this.changeEditStatus();
    },
    card0Photo() {
      this.changeEditStatus();
    },
    card1Photo() {
      this.changeEditStatus();
    }
  },
  beforeMount() {
    http
      .post(url.getArea, {pid: 0})
      .then(res => {
        this.one = res;
      })
      .catch(catchAppError);
  },
  mounted() {
    this.initMapQQ();
  },
  methods: {
    changeEditStatus() {
      const tab = menusNavigation.tabs.find(tab => tab.tab === 'Shop');
      tab.isEditing = true;
    },
    initMapQQ() {
      const that = this;
      // eslint-disable-next-line no-undef
      const citylocation = new qq.maps.CityService({
        complete(res) {
          that.dimension = res.detail.latLng.lat;
          that.longitude = res.detail.latLng.lng;
        }
      });
      citylocation.searchLocalCity();
    },
    photoImgUrl(url) {
      this.shopPhoto = url;
    },
    imgLoading(i) {
      this.imgUpLoading = i;
    },
    licenseLoading(i) {
      this.licenseImgUpLoading = i;
    },
    grantLoading(i) {
      this.grantImgUpLoading = i;
    },
    card0Loading(i) {
      this.card0ImgLoading = i;
    },
    card1Loading(i) {
      this.card1ImgLoading = i;
    },
    licenseImgUrl(url) {
      this.licensePhoto = url;
    },
    grantImgUrl(url) {
      this.grantPhoto = url;
    },
    card0ImgUrl(url) {
      this.card0Photo = url;
    },
    card1ImgUrl(url) {
      this.card1Photo = url;
    },
    onSubmit() {
      if (this.isUploading) {
        toast('信息正在提交，请稍后再试', 3000);
        return;
      }
      const params = {
        ...this.shopForm,
        shop_photo: this.shopPhoto || this.shopForm.shop_photo.path,
        grant: this.grantPhoto || this.shopForm.grant.path,
        license: this.licensePhoto || this.shopForm.license.path,
        id_card: [
          this.card0Photo || this.shopForm.id_card[0].path,
          this.card1Photo || this.shopForm.id_card[1].path
        ],
        is_door: this.door,
        is_show: this.shopForm.is_show.data,
        area_id: this.shopForm.region.id,
        dimension: this.dimension,
        longitude: this.longitude
      };
      const phoneIsCheck = params.fixed_line || params.shop_phone;
      const allIsCheck =
        phoneIsCheck &&
        params.address &&
        params.grant &&
        params.shop_photo &&
        params.license &&
        params.id_card[0] &&
        params.id_card[1] &&
        params.is_door &&
        params.is_show &&
        params.area_id;
      if (!allIsCheck) {
        toast('信息填写不完整，请完善后提交');
        return;
      }
      this.isUploading = true;
      http
        .post(url.upShop, params)
        .then(() => {
          toast('门店信息修改成功，平台将尽快给您进行审核，请耐心等待……');
          setTimeout(() => {
            this.isUploading = false;
            this.$emit('update:isEditing', false);
            const tab = menusNavigation.tabs.find(tab => tab.tab === 'Shop');
            tab.isEditing = false;
            window.scrollTo(0, 0);
          }, 5000);
        })
        .catch(catchAppError);
    },
    back() {
      const tab = menusNavigation.tabs.find(tab => tab.tab === 'Shop');
      if (!tab.isEditing) {
        this.$emit('update:isEditing', false);
        tab.isEditing = false;
        return;
      }
      this.$confirm('信息修改未保存，是否确认离开页面？', '', {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否'
      })
        .then(() => {
          this.$emit('update:isEditing', false);
          tab.isEditing = false;
        })
        .catch(_.noop);
    }
  }
};
</script>

<style lang="scss">
.el-tabs__content {
  overflow: visible;
}
.shop-edit-container {
  font-size: 16px;
  .el-form-item__content {
    font-size: 16px;
  }
  .el-form-item__label {
    font-weight: bold;
    font-size: 16px;
  }
  .btn-back {
    position: absolute;
    top: -65px;
    right: 30px;
  }
  .submit {
    margin-top: 55px;
    text-align: center;
    .el-button {
      width: 230px;
      padding: 14px 0;
      background-color: #ffb03e;
      border-color: #ffb03e;
      color: #fff;
    }
  }
  .el-card {
    margin-bottom: 20px;
    &.el-card-image {
      .el-card__body {
        padding-bottom: 0;
        padding-top: 0;
      }
      .el-row.image-row {
        padding-top: 20px;
        margin-bottom: 50px;
      }
    }
    .el-card__body {
      padding: 25px;
      .el-row {
        .el-col-12 {
          .el-input,
          .el-select {
            width: 370px;
            .el-input__inner {
              color: #999;
            }
          }
          .el-select > .el-input {
            width: 100%;
          }
          .title-faren {
            display: inline-block;
            width: 90px;
            font-weight: bold;
          }
        }
        .el-col-24 {
          .address {
            width: 90%;
            .el-input__inner {
              color: #999;
            }
          }
        }
        .el-select.city {
          width: 230px;
          margin-right: 10px;
          .el-input__inner {
            color: #999;
          }
        }
        &.intro {
          position: relative;
          .title {
            font-weight: bold;
            position: absolute;
            font-size: 16px;
          }
          .content {
            margin-left: 95px;
          }
        }
      }
      .shop-show {
        .el-radio-button {
          margin-right: 40px;
          .el-radio-button__inner {
            border-radius: 20px;
            border: 1px solid #ffb03e;
            color: #ffb03e;
            padding-left: 30px;
            padding-right: 30px;
            font-size: 16px;
          }
        }
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          background-color: #ffb03e;
          box-shadow: -1px 0 0 0 #ffb03e;
          color: #fff;
        }
      }
    }
  }
}
</style>
